<template>
    <div class="poster">
        <Upload show-type="text" accept-type="image" :size="500" :show-file-list="true" :limit="99" :file-list="[]" v-on:upload-change="uploaded">
            <div slot="tip">要求：JPG/PNG格式,<span class="text-danger">500KB</span>以内,尺寸严格按照<span class="text-danger">750x1334</span>,二维码空白(<span class="text-danger">135x135</span>)距离海报左上角<span class="text-danger">475x1153</span>位置, <a target="_blank" href="http://penguin-courses.oss-cn-shanghai.aliyuncs.com/image/post_example.jpeg">下载海报示例</a></div>
        </Upload>
        <div class="poster-list bui-cols">
            <div class="poster-item bui-col-1" v-for="item in posterList" :key="item.id">
                <div class="img">
                    <img :src="item.url">
                    <div class="cover">
                        <i class="el-icon-delete" @click="removePoster(item.id)"></i>
                    </div>
                </div>
                <div class="name">
                    <div class="input-group">
                        <input v-model="item.name" placeholder="海报名字，回车保存" @change="savePosterName($event.target.value, item.id)">
                        <i class="bar"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Upload from '@/components/Upload'
    import { selectAllPost, addPost, deletePost, updatePostName } from '@/api'
    export default {
        components: {
            Upload
        },
        data() {
            return {
                posterList: []
            }
        },
        created() {
            this.getPosterList()
        },
        methods: {
            getPosterList() {
                selectAllPost().then(res => {
                    this.posterList = res.data.result
                })
            },
            uploaded(img) {
                console.log(img)
                addPost({ url: img }).then(res => {
                    this.$message.success('上传成功')
                    this.getPosterList()
                })
            },
            savePosterName(name, id) {
                if (name.trim() === '') {
                    return false;
                }
                updatePostName({ id, name }).then(res => {
                    this.$message.success('保存成功')
                })
            },
            removePoster(id) {
                this.$confirm('是否确认删除该海报?', '提示').then(() => {
                    deletePost({ ids: id }).then(res => {
                        this.$message.success('删除成功')
                        this.getPosterList()
                    })
                })

            }
        }
    }
</script>

<style scoped lang="scss">
    .poster {
        .poster-list {
            width: 90%;
            align-items: flex-end;
            flex-wrap: wrap;

            .bui-col-1 {
                max-width: 25%;
                min-width: 24%;
                box-sizing: border-box;
                padding: 15px;
                text-align: center;

                .img {
                    position: relative;

                    img {
                        display: inline;
                        max-height: 300px;
                        max-width: 100%;
                    }

                    .cover {
                        display: none;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        width: 100%;
                        background: rgba(0, 0, 0, .6);
                        text-align: center;

                        i {
                            position: absolute;
                            font-size: 28px;
                            cursor: pointer;
                            color: #fff;
                            top: 48%;
                            left: 48%;
                        }
                    }

                    &:hover .cover {
                        display: block;
                    }
                }

                .name {
                    .input-group {
                        position: relative;
                    }

                    input {
                        display: block;
                        background: none;
                        padding: 5px 5px 2px;
                        font-size: 1rem;
                        border-width: 0;
                        border-color: transparent;
                        line-height: 1.9;
                        width: 100%;
                        transition: all .28s ease;
                        box-shadow: none;
                        outline: 0 none;

                        &:focus~.bar:before {
                            width: 100%;
                            left: 0
                        }
                    }

                    .bar {
                        position: relative;
                        border-bottom: 1px solid #999;
                        display: block;

                        &:before {
                            content: "";
                            height: 2px;
                            width: 0;
                            left: 50%;
                            bottom: -1px;
                            position: absolute;
                            background: #555;
                            transition: left .28s ease, width .28s ease;
                            z-index: 2;
                        }
                    }
                }

            }
        }

        /deep/ .upload-wrap {
            .el-upload-list {
                height: 30px;

                .el-upload-list__item:first-child {
                    margin-top: 0;
                }
            }

            .el-upload__tip {
                a {
                    color: var(--primary);
                }
            }
        }

    }
</style>